<!--  -->
<template>
  <div class="nav">
    <ul class="nav_ul">
      <li style="background-color:#364760;padding-top: 10px;"><div><img src="./../../../../public/img/logo.png" alt="" width="100%"></div></li>
      <li>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#364760"
          text-color="#c5c5c5"
          active-text-color="#fff"
          router
          unique-opened
          ><!--需要添加路由则需要在el-menu中添加router属性-->
          <div v-for="(item, index) in arry" :key="index">
            <el-submenu :index="item.id + ''" v-if="item.child.length!==0">
              <template slot="title">
                <i :class="item.icon" style="color:#c5c5c5"></i>

                <span>{{ item.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  :index="items.url"
                  v-for="(items, index) in item.child"
                  :key="index"
                  >{{ items.name }}</el-menu-item
                >
                <!--路由地址则添加到index中-->
                <!-- <el-menu-item :index="item.id+'-'+items.childId" v-for="items in item.child" :key="items.childId"><router-link :to="items.url">{{items.name}}</router-link></el-menu-item>  -->
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item :index="item.url" v-else>
              <i :class="item.icon" style="color:#c5c5c5"></i>
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </div>
        </el-menu>
      </li>
    </ul>
  </div>
</template>
<script >
export default {
  name: "AsideNav",
  data() {
    return {
      arry: [
        { id: 1, name: "首页", url: "/main", icon: "el-icon-s-home" },
        {
          id: 2,
          name: "房源管理",
          url: "/fangyuan",
          icon: "el-icon-s-order",
          child: [
            { childId: 1, name: "看房请求", url: "/main/viewhouserequest" },
            { childId: 2, name: "租房管理", url: "/main/rentalmanagement" },
            {
              childId: 3,
              name: "房源管理",
              url: "/main/houselist",
              child: [{ childId: 1, name: "房源图", url: "/main/houseimg" }],
            },
            { childId: 4, name: "新增房源", url: "/main/addhouse" },
          ],
        },
        {
          id: 3,
          name: "房东管理",
          url: "",
          icon: "el-icon-s-custom",
          child: [{ childId: 1, name: "房东列表", url: "/main/ownerlist" }],
        },
        {
          id: 4,
          name: "财务管理",
          url: "",
          icon: "el-icon-s-finance",
          child: [
            { childId: 1, name: "账单管理", url: "/main/billmanagement" },
            { childId: 2, name: "提现审核", url: "/main/withdrawalaudit" },
          ],
        },
        {
          id: 5,
          name: "用户管理",
          url: "/main/UserList",
          icon: "el-icon-user-solid",
          child: [{ childId: 1, name: "用户列表", url: "/main/userlist" }],
        },
        {
          id: 6,
          name: "合约管理",
          url: "",
          icon: "el-icon-s-claim",
          child: [{ childId: 1, name: "合同管理", url: "/main/conmanagement" }],
        },

        {
          id: 7,
          name: "系统管理",
          url: "",
          icon: "el-icon-s-tools",
          child: [
            { childId: 1, name: "房源接口", url: "/main/houseport" },
            { childId: 2, name: "字典配置", url: "/main/houseconfig" },
            { childId: 2, name: "合同模板", url: "/main/tianjia" },
          ],
        },
        {
          id: 8,
          name: "咨询管理",
          url: "",
          icon: "el-icon-star-on",
          child: [{ childId: 1, name: "资讯列表", url: "/main/quelist" }],
        },
        {
          id: 9,
          name: "问答管理",
          url: "/main/faq",
          icon: "el-icon-s-opportunity",
        },
      ],
    };
  },
  computed: {},
  props: [],
  components: {},
  created() {},
  mounted() {
    this.$axios({
      url: "/menu/findMenuByUsername",
      method: "GET",
    }).then((res) => {
      console.log(res);
      if (res.code === 0) {
        sessionStorage.setItem("menu", JSON.stringify(res.data));
        this.arry = res.data
      }
    });
    // this.$axios({
    //             method:'get',
    //             url:'/Backstage',
    //             params:{
    //             }
    //           }).then((res)=>{
    //             this.arry=res;
    //               })
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang='less' scoped>
.nav {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #364760;
}
.el-menu {
  height: 100%;
  border-right: none;
}
ul li {
  list-style-type: none;
  a {
    text-decoration: none;
    color: #03cad7;
  }
}
.nav_ul > li:nth-child(1) {
  font-size: 30px;
  line-height: 60px;
  text-align: center;
  box-sizing: border-box;
  padding: 0 20px;

  div {
    color: #409eff;
  }
}
.el-menu-item span {
  width: 100%;
}
.el-menu-item:focus, .el-menu-item:hover {
    outline: 0;
    background-color: #409eff !important;
}
</style>